<template>
	<view class="table-box">
		<slot name="headSolt"></slot>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe :type="tableType?'selection': ''" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<block v-for="(item,index) in tableConfig" :key="index">
						<uni-th v-if="!item.isHide" :width="item.width?item.width:'150'"
							align="center">{{item.title}}</uni-th>
					</block>
				</uni-tr>
				<uni-tr v-for="(item, index) in getTableData()" :key="index" @click.native="getRow(item,index)">
					<block v-for="(val,key,i) in item" :key="key+i">
						<uni-td :align="rowAlign?rowAlign:'center'">
							<view :class="key">{{ val }}</view>
						</uni-td>
					</block>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="tableData.length"
					@change="change" />
			</view>
		</view>
		<slot name="footSolt"></slot>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				searchVal: '',
				pageCurrent: 1,
				pageTableData: [],
				loading: true,
				rowData: {},
				tableRowData: {}
			}
		},
		props: {
			tableType: {
				type: String,
				default: ""
			},
			// 每页条数
			pageSize: {
				type: Number,
				default: 5
			},
			tableConfig: {
				type: Array,
				default: function() {
					return []
				}
			},
			tableData: {
				type: Array,
				default: function() {
					return []
				}
			},
			rowAlign: {
				type: String,
				default: "center"
			}
		},
		watch: {
			tableData(newValue, oldValue) {
				this.initTableData()
			}
		},
		mounted() {
			this.selectedIndexs = []
			this.initTableData()
		},
		methods: {
			getRow(rowData, index) {
				let rowIndex = (this.pageCurrent - 1) * this.pageSize + index
				this.rowData = this.tableData[rowIndex]
				this.tableRowData = rowData
				this.$emit('getRow', this.rowData, this.tableRowData, rowIndex)
			},

			getTableData() {
				return this.pageTableData.map((item, index) => {
					const filteredItem = {};
					this.tableConfig.forEach(configItem => {
						let value = ''
						if (configItem.key === 'rowNo') {
							value = (this.pageCurrent - 1) * this.pageSize + index + 1
						} else if (configItem.key && !configItem.isHide) {
							if (configItem.enum) {
								value = configItem.enum[this.getValueByKeyPath(item, configItem.key)];
							} else {
								value = this.getValueByKeyPath(item, configItem.key);
							}
						}
						if (value !== null) {
							filteredItem[configItem.key] = value
						} else {
							value = ''
						}
					});
					return filteredItem;
				});
			},

			getValueByKeyPath(obj, keyPath) {
				return keyPath.split('.').reduce((acc, part) => {
					return (acc && acc[part] !== undefined) ? acc[part] : '';
				}, obj);
			},

			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
				this.$emit('selectionChange', this.selectedItems(), this.selectedIndexs)
			},

			delTable() {
				console.log(this.selectedItems())
			},

			initTableData() {
				this.pageTableData = []
				let start = (this.pageCurrent - 1) * this.pageSize
				let end = start + this.pageSize
				this.pageTableData = this.tableData.slice(start, end)
				this.loading = false
			},

			change(e) {
				this.pageCurrent = e.current
				let start = (this.pageCurrent - 1) * this.pageSize
				let end = start + this.pageSize
				this.pageTableData = this.tableData.slice(start, end)
			},

			search() {
				this.getData(1, this.searchVal)
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>